<template>
    <div class="category">
        <!-- 添加按钮 -->
        <div class="add">
            <el-button type="primary" @click="addCategories">添加</el-button>
                    <!-- 添加按钮模态框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="addcategory" :rules="rules" ref="proFrom">
            <el-form-item label="栏目名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="addcategory.name" placeholder="输入栏目名称"></el-input>
            </el-form-item>
            <el-form-item label="栏目编号" :label-width="formLabelWidth" >
            <el-input v-model="addcategory.num" placeholder="排序号"></el-input>
            </el-form-item>
            <el-form-item label="图标" :label-width="formLabelWidth" prop="icon">
                <el-upload
                    class="avatar-uploader"
                    action="http://81.69.24.232/pet/jz_upload.php"
                    :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="toSave('proFrom')">确 定</el-button>
        </div>
        </el-dialog>
        </div>
        <!-- 表格 -->
        <el-table :data="categories.list"
                  style="width: 100%" size="small">
          <el-table-column type="index" label="序号"> 
          </el-table-column>
            <el-table-column prop="id" label="栏目编号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="栏目名称" align="center">
          </el-table-column>
          <el-table-column label="图标" align="center">
              <template v-slot="scope">
                    <el-popover
                        placement="right"
                        trigger="hover"
                        >
                         <img :src="scope.row.icon" alt="" width="150px">
                         <img :src="scope.row.icon" slot="reference" width="30px">
                    </el-popover>
              </template>
          </el-table-column>
          <el-table-column prop="num" label="排序号" align="center">
          </el-table-column>
          <el-table-column  label="操作" align="center">
              <template v-slot="scope">
                 <el-button type="text" size="small" @click="updatacat(scope.row)">编辑</el-button>
                 <el-button type="text" size="small" style="color:red" @click="del(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
                <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="categories.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="categories.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="categories.total">
        </el-pagination>
    </div>
</template>
<script>
 import request from '@/utils/request';
 import qs from 'qs';
 import _ from 'lodash';
import {mapState,mapActions} from 'vuex';
  export default {
      data() {
          return {
              categories:[],
              addcategory:{},
              imageUrl:'',
              dialogFormVisible:false,
              title:'',
              formLabelWidth:'180px',
              params: {
                    page:1,
                    pageSize:10
                },
                // 验证规则
                rules:{
                    name:[
                        {required: true, message:'请输入产品名称' , trigger:'blur'}
                    ],
                    icon:[
                        {required: true, message:'请上传图标' , trigger:'change'}
                    ],
                }
          }
      },
      computed:{
          ...mapState('Category',['Categories'])
      },
      methods: {
          ...mapActions('Category',['findAllproCategory']),
        //   分页获取数据
          pagefindCategory(){
              request.get('/productCategory/pageQuery',{
                            params:this.params
              }).then((res) =>{
                      this.categories = res.data;
              })
          },
          // 分页size-change
            handleSizeChange(pageSize){
                // 点击分页容量，将最新的pageSize设置到数据模型中，重新调用
                this.params.pageSize = pageSize;
                this.pagefindCategory();
            },
            // 分页current-change
            handleCurrentChange(page){
                this.params.page=page;
                this.pagefindCategory();
            },
        //   点击删除按钮
          del(id){
              console.log(id);
               this.$confirm('此操作将删除该栏目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() =>{
                        request.get('/productCategory/deleteById',{
                                params:{
                                    id:id
                                }
                        }).then((res) =>{
                             this.pagefindCategory(),
                            this.$message({
                            type: 'success',
                            message: res.message
                            });
                        })
                       })
              
          },
        //   上传图片函数
          handleAvatarSuccess(res, file){
                // 讲文件服务器响应的图片在线地址，设置到addcategory
                this.addcategory.icon = res;
                this.imageUrl = res
          },
        //   点击添加按钮
        addCategories(){
            this.title = '添加栏目信息';
            this.imageUrl = '';
            this.addcategory = {};
            this.dialogFormVisible = true;
        },
        // 点击编辑按钮
        updatacat(row){
            this.title = '修改栏目信息';
            this.addcategory = _.clone(row);
            this.imageUrl = row.icon;
            this.dialogFormVisible = true;
        },
        //   点击模态框确定按钮
        toSave(proFrom){
                this.$refs[proFrom].validate((valid) => {
                    if (valid) {
                          request.post('/productCategory/saveOrUpdate',qs.stringify(this.addcategory)).then((res) =>{
                    console.log(res);
                    this.pagefindCategory();
                    this.dialogFormVisible = false;
                    // 提示成功操作信息
                    this.$message({
                            type: 'success',
                            message: res.message
                        });
                })
                    } else {
                        alert('error submit!!');
                        return false;
                    }
                    });
        }
      },
      created() {
          this.pagefindCategory();
          this.findAllproCategory();
      },
  }
</script>
<style>
     .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>